import React, { memo, useEffect, useState } from 'react'
import { RightWrapper } from './style'
import IconGlobal from '@/assets/svg/icon-global'
import IconMenu from '@/assets/svg/icon_menu'
import IconAvatar from '@/assets/svg/icon_avatar'

const HeaderRight = memo(() => {
    // 定义
    const [showPanel, setShowPanel] = useState(false)

    useEffect(() => {
        function windowHandleClick() {
            setShowPanel(false)
        }
        // 监听window点击
        window.addEventListener("click", windowHandleClick, true)

        return () => {
            // 取消监听
            window.removeEventListener("click", windowHandleClick, true)
        }
    }, [])

    // 默认隐藏弹出框
    function profileClickHandle() {
        setShowPanel(true)
    }

    return (
        <RightWrapper>
            <div className="btns">
                <span className='btn'>登录</span>
                <span className='btn'>注册</span>
                <span className='btn'>
                    <IconGlobal />
                </span>
            </div>
            <div className="profile" onClick={profileClickHandle}>
                <IconMenu />
                <IconAvatar />

                {/* 弹出框 */}
                {showPanel && (
                    <div className="panel">
                        <div className="top">
                            <div className="item register">注册</div>
                            <div className="item login">登录</div>
                        </div>
                        <div className="bottom">
                            <div className='item'>出租房源</div>
                            <div className='item'>开展体验</div>
                            <div className='item'>帮助</div>
                        </div>
                    </div>
                )}
            </div>
        </RightWrapper>
    )
})

export default HeaderRight